<template>
  <!-- 粒子背景 -->
  <vue-particles id="tsparticles" :options="particlesOptions" />
  <!-- 登录面板 -->
  <div class="loginModel">
    <div class="logo">
      <img src="../../assets/logo-geek.png" alt="" />
    </div>
    <a-form
      :model="formState"
      name="basic"
      autocomplete="off"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
    >
      <a-form-item
        name="username"
        :rules="[
          { required: true, message: '账号不能为空！' },
          { min: 3, max: 15, message: '账号应该在3-15位', trigger: 'blur' },
        ]"
      >
        <a-input
          size="large"
          placeholder="请输入您的账号"
          ref="account"
          v-model:value="formState.username"
        >
          <template #prefix>
            <UserOutlined style="color: rgba(0, 0, 0, 0.25)" />
          </template>
        </a-input>
      </a-form-item>

      <a-form-item
        name="password"
        :rules="[{ required: true, message: '密码不能为空！' }]"
      >
        <a-input-password
          placeholder="请输入您的密码"
          size="large"
          v-model:value="formState.password"
        >
          <template #prefix>
            <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
          </template>
        </a-input-password>
      </a-form-item>

      <a-form-item name="remember">
        <a-checkbox
          v-model:checked="formState.remember"
          class="rememberCheckbox"
        >
          记住密码
        </a-checkbox>
      </a-form-item>

      <a-form-item>
        <a-button
          :loading="isLoading"
          type="primary"
          html-type="submit"
          block
          size="large"
        >
          登录
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script setup>
import { useRouter } from "vue-router";
import { reactive } from "vue";
import particlesOptions from "../../config/particles"; // 粒子 背景的配置
// 引入 图标组件
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
// 导入工具函数
import { setStorage, getStorage, removeStorage } from "@/utils/localStorage";
// import { loginApi } from "@/api/user";//api 
const router = useRouter();
// 发送请求loading
const isLoading = ref(false);
// 获取账号密码【记住密码】
const info = getStorage("userInfo");
const initInfo = {
  username: "",
  password: "",
  remember: true,
};
// 双向数据绑定表单
const formState = reactive(info ? info : initInfo);
// 自动获得焦点
const account = ref(null);
onMounted(() => {
  account.value.focus();
});

// 验证成功后登录
const onFinish = (values) => {
  // 记住密码功能
  const { username, password, remember } = values;
  remember ? setStorage("userInfo", values) : removeStorage("userInfo");
  // if (remember) {
  //   //保存密码-本地存储
  //   setStorage("userInfo", values);
  // } else {
  //   removeStorage("userInfo");
  // }
  console.log("Success:", values);
  isLoading.value = true;

  loginApi({username, password})
  .then((res)=>{
    console.log(res);
  })
  .catch((e) => {
    console.log(e);
  });
  // 3s后成功->跳转
  // setTimeout(() => {
  //   // success:
  //   // router.push("/home");
  //   // fail:
  //   isLoading.value = false;
  //   message.warn("账号或密码有误！");
  //   account.value.focus();
  // }, 3000);
};
// 验证失败
const onFinishFailed = () => {
  message.error("验证错误，请处理");
};
function login(username, password, rememberMe) {  
    if (validateCredentials(username, password)) {  
        let token = generateToken(username); // 生成一个加密的令牌  
        if (rememberMe) {  
            setCookie(token, {expires: 30}); // 持久化Cookie  
        } else {  
            setCookie(token, {expires: session}); // 仅会话期间有效  
        }  
        // 发送令牌给客户端，并可能重定向到主页  
    }  
}  
  
function authenticateRequest(token) {  
    if (validateToken(token)) {  
        // 验证成功，继续处理请求  
    } else {  
        // 验证失败，可能需要重定向到登录页面  
    }  
}
</script>
<style lang="less">
/* less ： CSS预处理器 */
.rememberCheckbox {
  color: #fff;
}
.loginModel {
  width: 500px;
  background-color: rgba(0, 0, 0, 0.55);
  position: fixed;
  left: 50%;
  top: 50%;
  color: #fff;
  padding: 20px 40px;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  border-radius: 6px;
  box-shadow: -1px 0px 17px 4px rgba(0, 0, 0, 0.55);
  .logo {
    display: flex;
    justify-content: center;
    img {
      width: 120px;
      margin-bottom: 20px;
    }
  }
}

</style>
